<!DOCTYPE html>
<!--[if lte IE 6]>            <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IEMobile 7]>          <html class="no-js iem7" lang="en"> <![endif]-->
<!--[if (IE 7)&(!IEMobile)]>  <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>                <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <title>callmepieman.com styleguide</title>

  <meta name="description" content="">
  <meta name="generator" content="kss-node">
  <meta name="viewport" content="width=device-width">

  <link rel="stylesheet" href="public/kss.css">
  <link rel="stylesheet" href="dist/styles.css">
<link rel="stylesheet" href="src/docs/styleguide.css">

</head>
<body id="kss-node">
<div class="kss-sidebar kss-style">
  <header class="kss-header">
    <h1 class="kss-doc-title">callmepieman.com styleguide</h1>
  </header>
  <nav class="kss-nav">
    <ul class="kss-nav__menu">
      <li class="kss-nav__menu-item">
        <a href="./">
          <span class="kss-nav__ref">0</span
          ><span class="kss-nav__name">Overview</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-base.html">
          <span class="kss-nav__ref">1</span
          ><span class="kss-nav__name">Base</span>
        </a>
        <ul class="kss-nav__menu-child">
            <li class="kss-nav__menu-item">
              <a href="section-base.html#kssref-base-breakpoints">
                <span class="kss-nav__ref ">1.1</span
                ><span class="kss-nav__name">Breakpoints.</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-base.html#kssref-base-colors">
                <span class="kss-nav__ref ">1.2</span
                ><span class="kss-nav__name">Colors.</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-base.html#kssref-base-reset">
                <span class="kss-nav__ref ">1.3</span
                ><span class="kss-nav__name">Reset.</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-base.html#kssref-base-visibility">
                <span class="kss-nav__ref ">1.4</span
                ><span class="kss-nav__name">Visibility.</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-base.html#kssref-base-visibility-hide">
                <span class="kss-nav__ref kss-nav__ref-child">1.4.1</span
                ><span class="kss-nav__name">Hide.</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-base.html#kssref-base-visibility-show">
                <span class="kss-nav__ref kss-nav__ref-child">1.4.2</span
                ><span class="kss-nav__name">Show.</span>
              </a>
            </li>
        </ul>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-components.html">
          <span class="kss-nav__ref">2</span
          ><span class="kss-nav__name">Components</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-dependencies.html">
          <span class="kss-nav__ref">3</span
          ><span class="kss-nav__name">Dependencies</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-regions.html">
          <span class="kss-nav__ref">4</span
          ><span class="kss-nav__name">Regions</span>
        </a>
      </li>
    </ul>
  </nav>
</div>
<article role="main" class="kss-main">

      <div     id="kssref-base" class="kss-section kss-section--depth-1">

    <div class="kss-style">
      <h1 class="kss-title kss-title--level-1">
        <a class="kss-title__permalink" href="#kssref-base">
          <span class="kss-title__ref">
              1
            <span class="kss-title__permalink-hash">
                #base
            </span>
          </span>
          Base
        </a>
      </h1>


      <div class="kss-description">
        <p>As the name suggest, base is the core.
Initialize variable and resets should be found in this directory.</p>

      </div>
    </div>


      </div>
      <section id="kssref-base-breakpoints" class="kss-section kss-section--depth-2">

    <div class="kss-style">
      <h2 class="kss-title kss-title--level-2">
        <a class="kss-title__permalink" href="#kssref-base-breakpoints">
          <span class="kss-title__ref">
              1.1
            <span class="kss-title__permalink-hash">
                #base.breakpoints
            </span>
          </span>
          Breakpoints.
        </a>
      </h2>


      <div class="kss-description">
        <p>Set of variables to make media query easy.</p>
<p>Available breakpoints are:</p>
<ul>
<li><code>$bkpt-s</code> : 20em (320px, given font size of 16px)</li>
<li><code>$bkpt-m</code> : 50em (800px, given font size of 16px)</li>
<li><code>$bkpt-l</code> : 90em (1440px, given font size of 16px)
Use it like an usual media-query.</li>
</ul>
<p>Examples:
 @media screen and (max-width: $bkpt-m) {}
 @media screen and (max-width: $bkpt-l) {}
 @media screen and (min-width: $bkp-s) and (max-width: $bkpt-m) {}</p>

      </div>
    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
          <div class="bkpt bkpt-s"></div>
<div class="bkpt bkpt-m"></div>
<div class="bkpt bkpt-l"></div>

        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;bkpt bkpt-s&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;bkpt bkpt-m&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;bkpt bkpt-l&quot;&gt;&lt;/div&gt;
</code></pre>
      </div>

      </section>
      <section id="kssref-base-colors" class="kss-section kss-section--depth-2">

    <div class="kss-style">
      <h2 class="kss-title kss-title--level-2">
        <a class="kss-title__permalink" href="#kssref-base-colors">
          <span class="kss-title__ref">
              1.2
            <span class="kss-title__permalink-hash">
                #base.colors
            </span>
          </span>
          Colors.
        </a>
      </h2>


      <div class="kss-description">
        <p>Set of color variables that compose the application.</p>

      </div>
    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
          <div class="background background-tab">
    $background-tab
</div>
<div class="background background-tab--active">
    $background-tab--active
</div>
<div class="background background-tab--item">
    $background-tab--item
</div>
<div class="color color-white">
    $color-white
</div>
<div class="color color-black">
    $color-black
</div>
<div class="color color-tabname">
    $color-tabname
</div>
<div class="color color-twitch">
    $color-twitch
</div>
<div class="color color-kageshi">
    $color-kageshi
</div>
<div class="color color-action--add">
    $color-action--add
</div>
<div class="color color-status--error">
    $color-action--error
</div>
<div class="color color-status--active">
    $color-action--active
</div>
<div class="color color-tab--item">
    $color-tab--item
</div>

        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;background background-tab&quot;&gt;
    $background-tab
&lt;/div&gt;
&lt;div class=&quot;background background-tab--active&quot;&gt;
    $background-tab--active
&lt;/div&gt;
&lt;div class=&quot;background background-tab--item&quot;&gt;
    $background-tab--item
&lt;/div&gt;
&lt;div class=&quot;color color-white&quot;&gt;
    $color-white
&lt;/div&gt;
&lt;div class=&quot;color color-black&quot;&gt;
    $color-black
&lt;/div&gt;
&lt;div class=&quot;color color-tabname&quot;&gt;
    $color-tabname
&lt;/div&gt;
&lt;div class=&quot;color color-twitch&quot;&gt;
    $color-twitch
&lt;/div&gt;
&lt;div class=&quot;color color-kageshi&quot;&gt;
    $color-kageshi
&lt;/div&gt;
&lt;div class=&quot;color color-action--add&quot;&gt;
    $color-action--add
&lt;/div&gt;
&lt;div class=&quot;color color-status--error&quot;&gt;
    $color-action--error
&lt;/div&gt;
&lt;div class=&quot;color color-status--active&quot;&gt;
    $color-action--active
&lt;/div&gt;
&lt;div class=&quot;color color-tab--item&quot;&gt;
    $color-tab--item
&lt;/div&gt;
</code></pre>
      </div>

      </section>
      <section id="kssref-base-reset" class="kss-section kss-section--depth-2">

    <div class="kss-style">
      <h2 class="kss-title kss-title--level-2">
        <a class="kss-title__permalink" href="#kssref-base-reset">
          <span class="kss-title__ref">
              1.3
            <span class="kss-title__permalink-hash">
                #base.reset
            </span>
          </span>
          Reset.
        </a>
      </h2>


      <div class="kss-description">
        <p>Additional reset styles.</p>

      </div>
    </div>


      </section>
      <section id="kssref-base-visibility" class="kss-section kss-section--depth-2">

    <div class="kss-style">
      <h2 class="kss-title kss-title--level-2">
        <a class="kss-title__permalink" href="#kssref-base-visibility">
          <span class="kss-title__ref">
              1.4
            <span class="kss-title__permalink-hash">
                #base.visibility
            </span>
          </span>
          Visibility.
        </a>
      </h2>


      <div class="kss-description">
        <p>Show/hide an element</p>

      </div>
    </div>


      </section>
      <section id="kssref-base-visibility-hide" class="kss-section kss-section--depth-3">

    <div class="kss-style">
      <h3 class="kss-title kss-title--level-3">
        <a class="kss-title__permalink" href="#kssref-base-visibility-hide">
          <span class="kss-title__ref">
              1.4.1
            <span class="kss-title__permalink-hash">
                #base.visibility.hide
            </span>
          </span>
          Hide.
        </a>
      </h3>


      <div class="kss-description">
        <p>Render an element hidden.</p>

      </div>
    </div>


      </section>
      <section id="kssref-base-visibility-show" class="kss-section kss-section--depth-3">

    <div class="kss-style">
      <h3 class="kss-title kss-title--level-3">
        <a class="kss-title__permalink" href="#kssref-base-visibility-show">
          <span class="kss-title__ref">
              1.4.2
            <span class="kss-title__permalink-hash">
                #base.visibility.show
            </span>
          </span>
          Show.
        </a>
      </h3>


      <div class="kss-description">
        <p>Render an element visible.</p>

      </div>
    </div>


      </section>
</article>

<!-- SCRIPTS -->
<script src="public/kss.js"></script>
<script src="public/prettify.js"></script>
<script>
  prettyPrint();
</script>
<script src="node_modules/jquery/dist/jquery.min.js"></script>



<!-- Automatically generated using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>
